<template>
  <div class="endpoint-monitor-container">
    <el-page-header @back="goBack" class="page-header">
      <template #content>
        <div class="header-content">
          <el-avatar 
            :size="32" 
            :src="project?.iconUrl" 
            v-if="project?.iconUrl" 
            shape="square"
          />

          <div class="header-text">
            <h2>{{ project?.name }} - 接口监控</h2>
            <p>实时监控项目API接口状态</p>
          </div>
        </div>
      </template>
    </el-page-header>

    <div class="content-container full-width">
      <el-row :gutter="16" class="main-content">
        <!-- 左侧目录树 -->
        <el-col :span="3" class="directory-panel">
          <el-card class="directory-card">
            <template #header>
              <div class="directory-header">
                <span>接口目录</span>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="showAddDirectoryDialog"
                  link
                >
                  <el-icon><Plus /></el-icon>
                  新增
                </el-button>
              </div>
            </template>
            <div class="directory-tree-container">
              <el-tree
                ref="directoryTreeRef"
                :data="directories"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                :highlight-current="true"
                @node-click="handleDirectoryClick"
              >
                <template #default="{ node, data }">
                  <div class="directory-node">
                    <el-icon class="folder-icon"><Folder /></el-icon>
                    <span class="directory-label">{{ node.label }}</span>
                    <div class="directory-actions">
                      <el-dropdown @command="handleDirectoryAction" size="small">
                        <el-button type="primary" size="small" link>
                          <el-icon><More /></el-icon>
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item :command="{action: 'add', data: data}">
                              <el-icon><Plus /></el-icon> 添加接口
                            </el-dropdown-item>
                            <el-dropdown-item :command="{action: 'rename', data: data}">
                              <el-icon><Edit /></el-icon> 重命名
                            </el-dropdown-item>
                            <el-dropdown-item :command="{action: 'delete', data: data}" divided>
                              <el-icon><Delete /></el-icon> 删除
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                  </div>
                </template>
              </el-tree>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧接口列表 -->
        <el-col :span="21" class="endpoint-panel">
          <el-card class="endpoints-card">
            <template #header>
              <div class="card-header">
                <div class="header-title">
                  <el-icon :size="18"><Connection /></el-icon>
                  <span>{{ currentDirectory ? currentDirectory.label : '全部接口' }}</span>
                  <el-tag type="info" class="endpoint-count">{{ filteredEndpoints.length }}</el-tag>
                </div>
                <div class="header-controls">
                  <el-input
                    v-model="searchKeyword"
                    placeholder="搜索接口..."
                    clearable
                    style="width: 200px; margin-right: 12px;"
                    @input="handleSearchInput"
                  >
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
                  <el-button @click="fetchEndpoints">
                    <el-icon><Refresh /></el-icon>
                    刷新
                  </el-button>
                </div>
              </div>
            </template>

            <div v-if="loading" class="loading-container">
              <el-skeleton :rows="5" animated />
            </div>

            <div v-else-if="filteredEndpoints.length === 0" class="empty-container">
              <el-empty description="暂无接口">
              </el-empty>
            </div>

            <div v-else>
              <el-table
                :data="filteredEndpoints"
                style="width: 100%"
                row-class-name="endpoint-row"
              >
                <el-table-column prop="name" label="接口名称" min-width="150">
                  <template #default="scope">
                    <div class="endpoint-name">
                      <el-tag
                        :type="getMethodTagType(scope.row.method)"
                        size="small"
                        class="method-tag"
                      >
                        {{ scope.row.method }}
                      </el-tag>
                      <span>{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="url" label="URL" min-width="200">
                  <template #default="scope">
                    <div class="endpoint-url">{{ cleanUrl(scope.row.url) }}</div>
                  </template>
                </el-table-column>

                <el-table-column label="检查频率" width="120" align="center">
                  <template #default="scope">
                    <el-tag>{{ scope.row.checkInterval }}秒</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="状态" width="100" align="center">
                  <template #default="scope">
                    <el-tooltip
                      :content="getStatusTooltip(scope.row.lastResult)"
                      placement="top"
                    >
                      <el-tag :type="getStatusType(scope.row.lastResult)">
                        {{ getStatusText(scope.row.lastResult) }}
                      </el-tag>
                    </el-tooltip>
                  </template>
                </el-table-column>

                <el-table-column label="响应时间" width="120" align="center">
                  <template #default="scope">
                    <span v-if="scope.row.lastResult?.responseTime">
                      {{ scope.row.lastResult.responseTime }} ms
                    </span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>

                <el-table-column label="最后检查" width="180" align="center">
                  <template #default="scope">
                    <span v-if="scope.row.lastResult?.checkedAt">
                      {{ formatTime(scope.row.lastResult.checkedAt) }}
                    </span>
                    <span v-else>从未检查</span>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="150" fixed="right">
                  <template #default="scope">
                    <div class="table-actions">
                      <el-button
                        type="primary"
                        size="small"
                        @click="viewHistory(scope.row)"
                      >
                        <el-icon><Clock /></el-icon>
                      </el-button>
                      <el-button
                        type="primary"
                        size="small"
                        @click="editEndpoint(scope.row)"
                      >
                        <el-icon><Edit /></el-icon>
                      </el-button>
                      <el-button
                        type="danger"
                        size="small"
                        @click="deleteEndpoint(scope.row)"
                      >
                        <el-icon><Delete /></el-icon>
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 添加目录对话框 -->
    <el-dialog
      v-model="directoryDialogVisible"
      :title="isEditDirectory ? '重命名目录' : '添加目录'"
      width="500px"
      class="directory-dialog"
    >
      <el-form
        ref="directoryFormRef"
        :model="directoryForm"
        :rules="directoryRules"
        label-width="80px"
      >
        <el-form-item label="目录名称" prop="name">
          <el-input
            v-model="directoryForm.name"
            placeholder="请输入目录名称"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="directoryDialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="saveDirectory"
            :loading="savingDirectory"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Connection,
  Refresh,
  Search,
  Folder,
  More,
  Plus,
  Edit,
  Delete
} from '@element-plus/icons-vue'
import api from '../services/api'

export default {
  name: 'EndpointMonitor',
  components: {
    Connection,
    Plus,
    Search,
    Refresh,
    Folder,
    More,
    Edit,
    Delete
  },
  props: {
    projectId: {
      type: [String, Number],
      required: true
    }
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()

    // 定义响应式变量
    const loading = ref(false)
    const dialogVisible = ref(false)
    const dialogTitle = ref('')
    const isEdit = ref(false)
    const saving = ref(false)
    const searchKeyword = ref('')
    const endpointFormRef = ref(null)
    const endpoints = ref([])
    const project = ref(null)
    const currentEndpoint = reactive({
      id: null,
      name: '',
      url: '',
      method: 'GET',
      checkInterval: 60,
      expectedStatus: 200
    })

    // 目录相关变量
    const directoryTreeRef = ref(null)
    const directoryDialogVisible = ref(false)
    const directoryFormRef = ref(null)
    const savingDirectory = ref(false)
    const currentDirectory = ref(null)
    const isEditDirectory = ref(false) // 是否为编辑目录模式
    const editingDirectory = ref(null) // 正在编辑的目录

    const directoryForm = reactive({
      name: ''
    })

    const directoryRules = {
      name: [
        { required: true, message: '请输入目录名称', trigger: 'blur' }
      ]
    }

    // 目录数据
    const directories = ref([])

    // 自动刷新相关
    const autoRefreshEnabled = ref(true)
    const refreshInterval = ref(30000) // 30秒
    let refreshTimer = null

    // 过滤后的接口列表
    const filteredEndpoints = computed(() => {
      let result = endpoints.value

      // 根据搜索关键词过滤
      if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        result = result.filter(endpoint =>
          (endpoint.name && endpoint.name.toLowerCase().includes(keyword)) ||
          (endpoint.url && endpoint.url.toLowerCase().includes(keyword))
        )
      }

      // 根据目录过滤（仅当选择了具体目录时）
      if (currentDirectory.value && currentDirectory.value.id !== undefined) {
        if (currentDirectory.value.id === null) {
          // 显示默认目录（directoryId为null的接口）
          result = result.filter(endpoint =>
            !endpoint.directoryId || endpoint.directoryId === null
          )
        } else if (currentDirectory.value.id !== 'all') {
          // 显示指定目录下的接口
          result = result.filter(endpoint =>
            endpoint.directoryId === currentDirectory.value.id
          )
        }
        // 如果currentDirectory.value.id === 'all'，则显示所有接口（不过滤）
      }

      return result
    })

    // 处理搜索输入
    const handleSearchInput = (value) => {
      // 搜索功能已经在computed属性filteredEndpoints中实现
      // 这里可以添加防抖等优化处理（如果需要）
    }

    // 移除URL中的查询参数
    const cleanUrl = computed(() => {
      return (url) => {
        try {
          const urlObj = new URL(url)
          return `${urlObj.origin}${urlObj.pathname}`
        } catch (e) {
          // 如果URL解析失败，返回原始URL
          return url
        }
      }
    })

    // 获取接口列表
    const fetchEndpoints = async () => {
      loading.value = true
      try {
        const response = await api.get(`/endpoints/project/${props.projectId}`)
        endpoints.value = response.data.map(endpoint => ({
          ...endpoint,
          lastResult: {
            success: Math.random() > 0.2,
            statusCode: Math.random() > 0.2 ? 200 : 500,
            responseTime: Math.floor(Math.random() * 500) + 50,
            checkedAt: new Date(Date.now() - Math.floor(Math.random() * 3600000)).toISOString()
          }
        }))
      } catch (error) {
        ElMessage.error('获取接口列表失败: ' + error.message)
        // 使用模拟数据以便展示
        endpoints.value = [
          {
            id: 1,
            name: '用户登录接口',
            url: 'https://api.example.com/auth/login',
            method: 'POST',
            checkInterval: 60,
            expectedStatus: 200,
            lastResult: {
              success: true,
              statusCode: 200,
              responseTime: 120,
              checkedAt: '2023-06-20T14:30:00Z'
            }
          },
          {
            id: 2,
            name: '获取用户信息',
            url: 'https://api.example.com/user/profile',
            method: 'GET',
            checkInterval: 120,
            expectedStatus: 200,
            lastResult: {
              success: false,
              statusCode: 500,
              responseTime: 3500,
              errorMessage: 'Internal Server Error',
              checkedAt: '2023-06-20T14:25:00Z'
            }
          }
        ]
      } finally {
        loading.value = false
      }
    }

    // 获取项目目录列表
    const fetchDirectories = async () => {
      try {
        const response = await api.get(`/directories/project/${props.projectId}`)
        // 添加"全部"和默认目录选项
        const allDirectory = { id: 'all', label: '全部', children: [] }
        const defaultDirectory = { id: null, label: '默认目录', children: [] }
        directories.value = [allDirectory, defaultDirectory, ...response.data.map(dir => ({
          id: dir.id,
          label: dir.name,
          children: []
        }))]

        // 默认选中"全部"
        currentDirectory.value = allDirectory
      } catch (error) {
        console.error('获取目录列表失败:', error)
        // 使用模拟数据
        directories.value = [
          { id: 'all', label: '全部', children: [] },
          { id: null, label: '默认目录', children: [] },
          { id: 1, label: '用户管理', children: [] },
          { id: 2, label: '订单管理', children: [] },
          { id: 3, label: '商品管理', children: [] },
          { id: 4, label: '支付接口', children: [] }
        ]

        // 默认选中"全部"
        currentDirectory.value = directories.value[0]
      }
    }

    // 获取项目详情
    const fetchProject = async () => {
      try {
        const response = await api.get(`/projects/${props.projectId}`)
        project.value = response.data
      } catch (error) {
        ElMessage.error('获取项目详情失败: ' + error.message)
        // 使用模拟数据以便展示
        project.value = {
          id: props.projectId,
          name: '示例项目',
          description: '这是一个示例项目'
        }
      }
    }

    // 返回项目详情
    const goBack = () => {
      router.push(`/`)
    }

    // 显示添加接口页面
    const showAddEndpointDialog = () => {
      router.push({
        name: 'AddEndpoint',
        params: {
          projectId: props.projectId
        }
      })
    }

    // 编辑接口
    const editEndpoint = (endpoint) => {
      router.push({
        name: 'EditEndpoint',
        params: {
          projectId: props.projectId,
          endpointId: endpoint.id
        }
      })
    }

    // 删除接口
    const deleteEndpoint = (endpoint) => {
      ElMessageBox.confirm(
        `确定要删除接口 "${endpoint.name}" 吗？此操作不可恢复。`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        try {
          await api.delete(`/endpoints/${endpoint.id}`)
          ElMessage.success('删除接口成功')
          fetchEndpoints()
        } catch (error) {
          ElMessage.error('删除接口失败: ' + error.message)
        }
      }).catch(() => {
        // 用户取消删除
      })
    }

    // 查看历史记录
    const viewHistory = (endpoint) => {
      ElMessage.info(`查看接口 "${endpoint.name}" 的历史记录`)
      // 实现查看历史记录逻辑
    }

    // 获取状态标签类型
    const getStatusType = (result) => {
      if (!result) return 'info'
      return result.success ? 'success' : 'danger'
    }

    // 获取状态文本
    const getStatusText = (result) => {
      if (!result) return '未知'
      return result.success ? '正常' : '异常'
    }

    // 获取状态提示信息
    const getStatusTooltip = (result) => {
      if (!result) return '未知状态'
      return result.success
        ? `状态正常 - ${result.statusCode} - ${result.responseTime}ms`
        : `状态异常 - ${result.statusCode} - ${result.errorMessage || '无错误信息'}`
    }

    // 获取方法标签类型
    const getMethodTagType = (method) => {
      const methodTypes = {
        GET: '',
        POST: 'success',
        PUT: 'warning',
        DELETE: 'danger',
        PATCH: 'info'
      }
      return methodTypes[method] || ''
    }

    // 格式化时间
    const formatTime = (timeStr) => {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return date.toLocaleString('zh-CN')
    }

    // 开始自动刷新
    const startAutoRefresh = () => {
      if (autoRefreshEnabled.value && refreshInterval.value > 0) {
        refreshTimer = setInterval(() => {
          fetchEndpoints()
        }, refreshInterval.value)
      }
    }

    // 停止自动刷新
    const stopAutoRefresh = () => {
      if (refreshTimer) {
        clearInterval(refreshTimer)
        refreshTimer = null
      }
    }

    // 显示添加目录对话框
    const showAddDirectoryDialog = () => {
      isEditDirectory.value = false
      directoryForm.name = ''
      directoryDialogVisible.value = true
    }

    // 显示重命名目录对话框
    const showRenameDirectoryDialog = (directory) => {
      isEditDirectory.value = true
      editingDirectory.value = directory
      directoryForm.name = directory.label
      directoryDialogVisible.value = true
    }

    // 保存目录（新增或重命名）
    const saveDirectory = async () => {
      directoryFormRef.value.validate(async (valid) => {
        if (valid) {
          savingDirectory.value = true
          try {
            if (isEditDirectory.value) {
              // 重命名目录
              const directoryData = {
                id: editingDirectory.value.id,
                name: directoryForm.name,
                projectId: props.projectId
              }

              await api.put(`/directories/${editingDirectory.value.id}`, directoryData)
              editingDirectory.value.label = directoryForm.name
              ElMessage.success('目录重命名成功')
            } else {
              // 新增目录
              const directoryData = {
                name: directoryForm.name,
                projectId: props.projectId
              }

              const response = await api.post('/directories', directoryData)
              const newDirectory = {
                id: response.data.id,
                label: response.data.name,
                children: []
              }
              directories.value.push(newDirectory)
              ElMessage.success('目录添加成功')
            }
            directoryDialogVisible.value = false
          } catch (error) {
            ElMessage.error('操作失败: ' + (error.response?.data?.message || error.message))
          } finally {
            savingDirectory.value = false
          }
        }
      })
    }

    // 删除目录
    const deleteDirectory = async (directory) => {
      if (!directory.id) {
        ElMessage.warning('不能删除默认目录')
        return
      }

      try {
        await ElMessageBox.confirm(
          `确定要删除目录 "${directory.label}" 吗？此操作不可恢复。`,
          '确认删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        await api.delete(`/directories/${directory.id}`)

        // 从目录数组中移除该目录
        const index = directories.value.findIndex(item => item.id === directory.id)
        if (index !== -1) {
          directories.value.splice(index, 1)
          ElMessage.success('删除目录成功')
        }
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除目录失败: ' + (error.response?.data?.message || error.message))
        }
      }
    }

    // 处理目录点击
    const handleDirectoryClick = async (data) => {
      currentDirectory.value = data

      // 如果点击的是"全部"，则显示所有接口
      if (data.id === 'all') {
        fetchEndpoints()
        return
      }

      // 根据目录ID获取接口列表
      loading.value = true
      try {
        let response
        if (data.id === null) {
          // 获取默认目录下的接口（directoryId为null的接口）
          response = await api.get(`/endpoints/project/${props.projectId}?directoryId=-1`)
        } else {
          // 获取指定目录下的接口
          response = await api.get(`/endpoints/project/${props.projectId}?directoryId=${data.id}`)
        }

        endpoints.value = response.data.map(endpoint => ({
          ...endpoint,
          lastResult: {
            success: Math.random() > 0.2,
            statusCode: Math.random() > 0.2 ? 200 : 500,
            responseTime: Math.floor(Math.random() * 500) + 50,
            checkedAt: new Date(Date.now() - Math.floor(Math.random() * 3600000)).toISOString()
          }
        }))
      } catch (error) {
        ElMessage.error('获取接口列表失败: ' + error.message)
        endpoints.value = []
      } finally {
        loading.value = false
      }
    }

    // 在目录中添加接口
    const showAddEndpointToDirectory = (directory) => {
      ElMessage.info(`在目录 "${directory.label}" 中添加接口`)
      currentDirectory.value = directory
      // 将目录ID传递给添加接口页面
      router.push({
        name: 'AddEndpoint',
        params: {
          projectId: props.projectId
        },
        query: {
          directoryId: directory.id !== 'all' ? directory.id : null
        }
      })
    }

    // 处理目录操作（添加接口、重命名、删除）
    const handleDirectoryAction = (command) => {
      const { action, data } = command
      switch (action) {
        case 'add':
          showAddEndpointToDirectory(data)
          break
        case 'rename':
          showRenameDirectoryDialog(data)
          break
        case 'delete':
          deleteDirectory(data)
          break
      }
    }

    // 组件挂载时
    onMounted(() => {
      fetchProject()
      fetchEndpoints()
      fetchDirectories() // 获取目录列表
      startAutoRefresh()
    })

    // 组件卸载时
    onUnmounted(() => {
      stopAutoRefresh()
    })

    return {
      // 基础数据
      project,
      endpoints,
      loading,
      searchKeyword,
      filteredEndpoints,

      // 表单相关
      dialogVisible,
      dialogTitle,
      isEdit,
      saving,
      endpointFormRef,
      currentEndpoint,

      // 目录相关

      directoryTreeRef,
      directories,
      currentDirectory,
      directoryDialogVisible,
      directoryFormRef,
      savingDirectory,
      isEditDirectory,
      editingDirectory,
      directoryForm,
      directoryRules,

      // 自动刷新相关
      autoRefreshEnabled,
      refreshInterval,

      // 方法
      fetchEndpoints,
      viewHistory,
      deleteEndpoint,   // 添加deleteEndpoint函数
      showAddEndpointDialog,
      handleDirectoryClick,
      handleDirectoryAction,
      showAddDirectoryDialog,
      showAddEndpointToDirectory,
      saveDirectory,
      getStatusType,
      getStatusText,
      getStatusTooltip,
      getMethodTagType,
      formatTime,
      startAutoRefresh,
      stopAutoRefresh,
      cleanUrl,
      handleSearchInput,
      goBack,          // 添加goBack函数
      editEndpoint,    // 添加editEndpoint函数
    }
  }
}
</script>

<style scoped>
.endpoint-monitor-container {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f9f6e7;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 16px;
  background-color: #f0ebe0;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #e0d4b4;
}

.header-content h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #5a4a3a;
}

.header-content p {
  margin: 4px 0 0 0;
  color: #7a6b5a;
  font-size: 14px;
}

.main-content {
  height: calc(100vh - 180px);
  margin: 0;
  padding: 0 20px;
}

.directory-panel {
  height: 100%;
}

.endpoint-panel {
  height: 100%;
}

.directory-card,
.endpoints-card {
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0d4b4;
  background: #fffdf8;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.directory-card {
  background: #fffdf8;
}

.directory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.directory-tree-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.directory-node {
  display: flex;
  align-items: center;
  width: 100%;
}

.folder-icon {
  margin-right: 8px;
  color: #cdaa52;
}

.directory-label {
  flex: 1;
  font-size: 14px;
}

.directory-actions {
  opacity: 0;
  transition: opacity 0.3s;
}

.directory-node:hover .directory-actions {
  opacity: 1;
}

.endpoints-card :deep(.el-card__body) {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #5a4a3a;
}

.endpoint-count {
  margin-left: 8px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loading-container {
  padding: 40px 0;
}

.empty-container {
  padding: 60px 0;
}

.endpoint-row:hover {
  background-color: #fdfcf8;
}

.endpoint-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.method-tag {
  width: 60px;
  text-align: center;
}

.endpoint-url {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #666;
}

.table-actions {
  display: flex;
  gap: 0;
  justify-content: center;
  background-color: #f8f6ee; /* 设置操作列背景颜色 */
}

.table-actions .el-button {
  padding: 0 8px;
  min-width: auto;
  height: 24px;
  border: none;
  background: transparent;
  color: #606266;
}

.table-actions .el-button + .el-button {
  margin-left: 0;
  border-left: 1px solid #e0d4b4;
}

.table-actions .el-button:hover {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.table-actions .el-button--danger {
  color: #f56c6c;
}

.table-actions .el-button--danger:hover {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

.table-actions .el-button .el-icon {
  font-size: 14px;
}

/* 统一表格列背景色 */
:deep(.el-table__body tr td) {
  background-color: #f8f6ee;
}

.unit {
  margin-left: 8px;
  color: #666;
}

:deep(.el-card__header) {
  border-bottom: 1px solid #e0d4b4;
  padding: 16px 20px;
}

:deep(.el-table th) {
  background-color: #f9f6e7;
}

:deep(.el-table .cell) {
  padding: 0 12px;
}

.directory-dialog :deep(.el-dialog__body) {
  padding: 20px;
}
</style>